<template> 
    <!-- <listViewTop
      :coverImgUrl="state.playList.coverImgUrl"
      :playCount="state.playList.playCount"
      :name="state.playList.name"
      :playList="state.playList"
      :avatarUrl="state.playList.creator.avatarUrl"
      :nickname="state.playList.creator.nickname"
      :description="state.playList.description"
      :commentCount="state.playList.commentCount"
      :shareCount="state.playList.shareCount"
     ></listViewTop> -->
    <playList :playlist="state.playList"></playList>
</template>

<script>
import listViewTop from "@/components/listview/listViewTop.vue"
import playList from '@/components/playList.vue'
import {getPlayListDetail} from '../api/index.js'
import {onMounted,reactive} from 'vue'
import {useRoute} from 'vue-router'
import store from '@/store/index.js'
export default {
 components:{
   listViewTop,
   playList
 },
 setup(){
  //变量
  //歌单信息
  let state=reactive({
    playList:{
      creator:{},
      tracks:{}
    },
  })
  const route=useRoute()
  //函数
  //获取推荐歌单数据
  async function getPlayLists(id){
      const {data:res}=await getPlayListDetail(id,30)
      state.playList=res.playlist
      console.log(state.playList.tracks);
      // state.playList.playCount=playCount('number',state.playList.playCount)
       // 把歌曲列表放到vuex中
      store.commit('setPlaylist',state.playList.tracks)
  }
  // 生命周期
  onMounted(() => {
    getPlayLists(route.query.id)
  })

   return{
      state
   }
 },
}
</script>

<style lang="less" scoped>
.topListDetail{
  width: 7.5rem;
  height: 100vh;
}
</style>